<template>
  <el-table :data="history" style="width: 100%" @row-click="rowClick">
    <el-table-column prop="CID" label="教室号" width="180" />
    <el-table-column prop="StartTime" label="开始时间" />
    <el-table-column prop="EndTime" label="结束时间" />
  </el-table>

  <el-dialog
      v-model="dialogVisible"
      width="50%"
  >
    <el-descriptions title="详细信息"
                     :column="1"
                     direction="vertical"
                     border>
      <el-descriptions-item label="教室号">{{rowNow.CID}}</el-descriptions-item>
      <el-descriptions-item label="开始时间">{{rowNow.StartTime}}</el-descriptions-item>
      <el-descriptions-item label="结束时间">{{rowNow.EndTime}}</el-descriptions-item>
    </el-descriptions>

<!--    <template #footer>-->
<!--      <span class="dialog-footer">-->
<!--        <el-button type="danger" @click="cancelSeat">取消预定</el-button>-->
<!--      </span>-->
<!--    </template>-->
  </el-dialog>
</template>

<script>
import {onMounted, ref} from "vue";
import API from "@/plugins/axiosInstanse";
import {ElMessage} from "element-plus";

export default {
  name: "History",
  setup(){
    const dialogVisible = ref(false)
    const history = ref()
    const rowNow  = ref()
    onMounted(()=>{
      API.get('api/getHistory').then((response)=>{
        history.value = response.HistoryList
      })
    })
    const rowClick=(row)=>{
      console.log(row)
      rowNow.value = row
      console.log(rowNow)
      dialogVisible.value = true
    }
    const cancelSeat=()=>{
      dialogVisible.value = false
      API.get('api/cancelSeat',{
        params:{
          ID:rowNow.value.ID
        }
      }).then((rsp)=>{
        if(rsp.Status){
          ElMessage({
            message: '删除成功',
            type: 'success',
          })
        }else{
          ElMessage({
            message: '删除失败',
            type: 'warning',
          })
        }
      })
    }
    return {
      rowClick,
      cancelSeat,
      history,
      dialogVisible,
      rowNow
    }
  }

}
</script>

<style scoped>

</style>